import React, { useState, useEffect, useRef, useImperativeHandle } from 'react';
import { Row, Col, Button, message, Form } from 'antd';
import services from '../../../../services/api';
import Item from './item';
import { randomKey } from 'src/utils/utils';
/**
 * @component enumeration 枚举组件
 * @prop {Array} value 枚举值
 *
 */

function Enumeration(props) {
  const { id } = props;
  const [values, setValues] = useState([]);
  const valueRef = useRef(values);
  valueRef.current = values;

  useImperativeHandle(props.createRef, () => ({
    // 暴露方法给父组件,收集值，验证应该放到这里，后面再做
    getValue: (cb) => {
      props.form.validateFields((err, values) => {
        if (!err) {
          const data = valueRef.current.map((item) => {
            return { value: item.value, code: item.code };
          });
          cb(data);
        }
      });
    },
  }));

  useEffect(() => {
    services.vars.varEnumList({ id }).then((data) => {
      if (data.code === '0') {
        if (data.data && data.data.length > 0) {
          initValue(data.data);
        } else {
          addItem();
        }
      } else {
        message.error(data.msg);
      }
    });
  }, []);

  // 初始化
  function initValue(values) {
    const newValue = values.map((item) => {
      return {
        enumer_id: randomKey(),
        value: item.value,
        code: item.code,
      };
    });
    setValues(newValue);
  }

  //添加
  function addItem() {
    const item = {
      enumer_id: randomKey(),
      value: '',
      code: '',
    };
    const newValue = [...values, item];
    setValues(newValue);
  }

  // 修改item
  function handleChange(index, type, value) {
    values[index][type] = value;
    const newValue = [...values];
    setValues(newValue);
  }

  // 删除
  function del(index) {
    values.splice(index, 1);
    const newValue = [...values];
    console.log(newValue);
    setValues(newValue);
  }

  // 移动
  function move(index, step) {
    const item = values[index];
    // 下移
    if (step === 'down') {
      values.splice(index, 1); //移除当前项
      values.splice(index + 1, 0, item); // 在index+1处插入当前item
      // 上移
    } else if (step === 'up') {
      values.splice(index, 1); //移除当前项
      values.splice(index - 1, 0, item); // 在index-1处插入当前item
    }
    const newValue = [...values];
    console.log(newValue);
    setValues(newValue);
  }

  return (
    <>
      <div style={{ marginTop: '20px' }} className='rule-wp'>
        <Row type='flex' justify='start' gutter={10} style={{ marginBottom: '10px' }}>
          <Col>
            <Button
              type='primary'
              onClick={() => {
                addItem();
              }}
            >
              添加一行
            </Button>
          </Col>
        </Row>
        <Row type='flex' justify='space-between' align='middle' gutter={10} style={{ marginBottom: 20 }}>
          <Col span={2}>序号</Col>
          <Col span={8}>枚举CODE</Col>
          <Col span={8}>枚举值</Col>
          <Col span={6}>操作</Col>
        </Row>
        {values.map((item, index) => {
          return (
            <Item
              value={item}
              index={index}
              length={values.length}
              key={item.enumer_id}
              form={props.form}
              onChange={handleChange}
              move={move}
              del={del}
            />
          );
        })}
      </div>
    </>
  );
}

export default Form.create()(Enumeration);
